import { useState } from "react";
import { useEffect } from "react"

const MyUseEffect = () => {
  const [count, setCount] = useState(0)
  const [sex, setSex] = useState('男')
  // 1.useEffect()没有传入依赖选项的参数时，默认在每次 render 时都会重新执行回调；componentDidMount、componentDidUpdate会执行

  // useEffect(() => {
  //   console.log('渲染MyUseEffect组件');
  // })

  //2. 传递一个 []，只有在组件初始化或销毁的时候才会触发；
  // useEffect(() => {
  //   console.log('渲染MyUseEffect组件');
  // }, [])

  //3. 传入 [依赖 state] ，在依赖 state 发生改变时, 才重新执行该回调。可以调后台接口。
  // componentDidMount、依赖 state 发生改变时
  useEffect(() => {
    console.log('渲染MyUseEffect组件, sex改变了。');
  }, [sex])
  useEffect(() => {
    console.log('渲染MyUseEffect组件, count改变了。');
  }, [count])

  //4. useEffect()的callback里面，如果返回了一个函数，这个函数会在组件卸载之前执行。componentWillUnMount时执行

  // 可以添加依赖或不添加依赖。

  // let timer = null;
  // const fn1 = () => {
  //   alert(1)
  // }
  // useEffect(() => {
  //   // timer = setInterval(function () {
  //   //   console.log(10);
  //   // }, 3000)
  //   // // 在组件销毁之前，执行return后面的函数。
  //   // return () => {
  //   //   clearInterval(timer)
  //   // }
  //   window.addEventListener('click', fn1, true)

  //   return () => {
  //     window.removeEventListener('click', fn1, true)
  //   }
  // })

  return (
    <div>
      <h1>MyUseEffect组件案例: count: {count}</h1>
      <button type="button" onClick={() => {
        setCount(count + 1)
      }}>+1</button>
      <br />
      <button type="button" onClick={() => {
        setSex('女')
      }}>修改性别</button>
    </div>
  )
}
export default MyUseEffect